<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=  b, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 500px;
            height: 500px;
            margin: 50px auto;
            
        }
        li{
            width: 150px;
            height: 150px;
            background:pink;
            float: left;
            margin: 5px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 150px;
        }
        .light{
            width: 150px;
            height: 150px;
            background: yellow;
        }
        .light2{
            width: 150px;
            height: 150px;
            background: skyblue;
        }
    </style>
        <ul id="humber">
            <li>谢谢惠顾</li>
            <li>再来一次</li>
            <li>再来一次</li>
            <li>一分钱</li>
            <li><button id="a1">开始</button> <button id="a2">停止</button></li>
            <li>再来一次</li>
            <li>再来一次</li>
            <li>谢谢惠顾</li>
            <li>魅影5元代金券</li>
        </ul>
        <script>
           var a1=document.getElementById("a1");
           var a2=document.getElementById("a2");
           var ul1=document.getElementById("humber");
           var num=-1;
           var lis=document.getElementsByTagName("li");
           var time
           a1.onclick=function(){
               time=setInterval(function(){
                   lis[0].className="light"; 
                   num++;
                   if(num>9){
                       num=0;
                   }
                   lis[num-1].className="light2";
                   lis[num].className="light"; 
                   lis[0].className="light2"; 
                   if(num==4){
                       lis[4].className="light2";
                   }
               },10)
           }
           a2.onclick=function(){
               clearInterval(time)
           }
        </script>
</body>
</html>